<template>
  <div class="BannerView">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '' }">首页BANNER管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索部分 -->
    <div class="banner-search">
      <el-form ref="form" :model="form" label-width="80px">

        <div class="ban-search">
          <el-form-item label="内容类型">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="患教活动" value="0"></el-option>
              <el-option label="病历探讨" value="1"></el-option>
              <el-option label="H5活动" value="2"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="ban-search">
          <span class="demonstration">创建时间</span>
          <el-date-picker v-model="form.value" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </div>
        <div class="ban-search">
          <el-form-item>
            <el-button>重置</el-button>
<<<<<<< Updated upstream
            <el-button type="primary" @click="searchbanner()">搜索</el-button>
=======
            <el-button type="primary"
                       @click="aaa()">搜索</el-button>
>>>>>>> Stashed changes
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="list">
      <div class="list-name">
        <b>BANNER列表</b>
        <div class="but">
          <el-button type="primary" @click="aaa(); add = true; edit = false">新增</el-button>
        </div>
      </div>
      <div>
        <template>
          <el-table :data="bannerlist" style="width: 100%">
            <el-table-column label="BANNER图" prop="id" v-model="form.img">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.ban_img }}</span>
              </template>
            </el-table-column>

            <el-table-column label="内容类型">
              <template slot-scope="scope">
                {{ scope.row.ban_type == 0 ? '患教活动' : scope.row.ban_type == 1 ? '病历探讨' : 'H5活动' }}
                <!-- <span style="margin-left: 10px">
                {{ scope.row.ban_type }}
                </span> -->
              </template>
            </el-table-column>
            <!-- <el-table-column label="位置">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.count }}</span>
              </template>
            </el-table-column> -->
            <el-table-column label="展示端">
              <template slot-scope="scope">
                {{ scope.row.ban_exh == 0 ? '患者端' : scope.row.ban_exh == 1 ? '医生端' : '医生端,患者端' }}
                <!-- <span style="margin-left: 10px">{{ scope.row.ban_exh }}</span> -->
              </template>
            </el-table-column>
            <el-table-column label="创建时间">
              <template slot-scope="scope">
<<<<<<< Updated upstream
                <span style="margin-left: 10px">{{ scope.row.ban_regTime | dataFormat }}</span>
=======
                <span style="margin-left: 10px">{{ scope.row.ban_regTime }}</span>
>>>>>>> Stashed changes
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template slot-scope="scope">
                {{ scope.row.ban_isud == 0 ? '未发布' : scope.row.ban_isud == 1 ? '已发布' : '已下架' }}
                <!-- <span style="margin-left: 10px">{{ scope.row.ban_isud }}</span> -->
              </template>
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="middle" type="text" @click="bannerse(scope.row)"
                  v-if="scope.row.ban_isud == '0' || scope.row.ban_isud == '1' || scope.row.ban_isud == '2'">查看
                </el-button>
                <el-button size="middle" type="text" @click="deletebanner(scope.row)" v-if="scope.row.ban_isud == '2'">删除
                </el-button>
                <el-button size="middle" type="text" @click="updatebanner(scope.row)" v-if="scope.row.ban_isud == '1'">下架
                </el-button>
<<<<<<< Updated upstream

                <el-button size="middle" type="text" @click="updatebanner(scope.row)"
                  v-if="scope.row.ban_isud == '2' || scope.row.ban_isud == '0'">发布
=======
                <el-button size="middle"
                           type="text"
                           @click="updatebanner(scope.row)"
                           v-if="scope.row.ban_isud=='2'||scope.row.ban_isud=='0'">发布
>>>>>>> Stashed changes
                </el-button>
                <el-button size="middle" type="text" @click="bbb(scope.row); edit = true; add = false"
                  v-if="scope.row.ban_isud == '2' || scope.row.ban_isud == '0'">编辑
                </el-button>
              </template>

            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
<<<<<<< Updated upstream
    <el-pagination background layout="prev, pager, next" :total="bannercount" :current-page="Number(page)"
      :page-size="Number(size)" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
=======
    <el-pagination background
                   layout="prev, pager, next"
                   :total="bannercount"
                   :current-page="Number(page)"
                   :page-size="Number(size)"></el-pagination>
>>>>>>> Stashed changes

    <el-dialog title="" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form ref="form" :model="form" label-width="80px" :disabled="form.cc">
        <el-form-item label="内容类型">
          <el-select v-model="form.type" @change="h5()" placeholder="请选择">
            <el-option label="患教活动" value="0"></el-option>
            <el-option label="病历探讨" value="1"></el-option>
            <el-option label="H5活动" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示端">
          <el-select v-model="form.shows" placeholder="请选择">
            <el-option label="患者端" value="0"></el-option>
            <el-option label="医生端" value="1"></el-option>
            <el-option label="患者端,医生端" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="活动内容">
          <el-input v-model="form.content"></el-input>
        </el-form-item>
        <el-form-item label="H5链接" v-if="isvisibale">
          <el-input v-model="form.link"></el-input>
        </el-form-item>
        <div>
          <h6>BANNER图</h6>
        </div>
        <div class="img">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download"></i>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="edit" @click="centerDialogVisible = false; upbanner()">保 存</el-button>
        <el-button type="primary" v-if="add" @click="centerDialogVisible = false; banneradd()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "BannerList",
  data() {
    return {
      form: {
        region: '',
        img: '',
        type: '',
        shows: '',
        value: '',
        content: '',
        link: '',
        cc: false,
        bb: ''
      },
      value1: '',
      value2: '',
      bannercount: null,
      page: '1',
      size: '5',
      centerDialogVisible: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      bannerlist: [],
      isvisibale: false,
      add: false,
      edit: false,
    }
  },
  computed: {

  },
  mounted() {
    this.getbannerlist();
  },
  methods: {
<<<<<<< Updated upstream
    handleSizeChange(val) {
      this.size = val
      console.log(`每页 ${val}条`);
      this.bannerlist.splice(0)
      this.getbannerlist();
    },
    handleCurrentChange(val) {
      this.bannerlist.splice(0)
      this.page = val
      console.log(`当前页: ${val}`);
      this.getbannerlist()
    },
    h5() {
=======
    h5 () {
>>>>>>> Stashed changes
      if (this.form.type == 2) {
        this.isvisibale = true;
      } else {
        this.isvisibale = false;
      }

    },
<<<<<<< Updated upstream
    aaa() {
      this.form.cc = false
=======
    aaa () {
>>>>>>> Stashed changes
      this.centerDialogVisible = true
      this.form.type = "";
      this.form.shows = "";
      this.form.content = "";
    },
    banneradd() {
      this.$service.bannerService.banneradd(this.form.content, this.form.shows, this.form.link, this.form.img, this.form.type).then(res => {
        console.log(res)
      })
      this.getbannerlist();
    },

    bannerse(row) {
      this.centerDialogVisible = true,
        console.log(row);
      this.form.type = row.ban_type == 0 ? '患教活动' : row.ban_type == 1 ? '病历探讨' : 'H5活动';
      this.form.shows = row.ban_exh == 0 ? '患者端' : row.ban_exh == 1 ? '医生端' : '患者端,医生端';
      this.form.content = row.ban_activty;
      this.form.link = row.ban_H5;
      this.form.img = row.ban_img
      this.form.cc = true
    },
    //获取banner列表
<<<<<<< Updated upstream
    getbannerlist() {
      this.bannerlist.splice(0)
=======
    getbannerlist () {
>>>>>>> Stashed changes
      this.$service.bannerService.getbannerlist(this.page, this.size).then(res => {
        // this.hospitalCount = res.data.count;
        console.log(res);
        this.bannerlist = res.data.data.maps;
      })
    },
    deletebanner(row) {
      this.$service.bannerService.deletebanner(row.ban_id).then(res => {
        console.log(res)
      })
      this.getbannerlist();
    },
    updatebanner(row) {
      this.$service.bannerService.updatebanner(row.ban_id, row.ban_isud).then(res => {
        console.log(res);
        this.getbannerlist();
      })
    },
<<<<<<< Updated upstream
    bbb(row) {
      window.sessionStorage.setItem("ban_id", row.ban_id);
      // window.sessionStorage.setItem("ban_content", row.ban_activty);
      // window.sessionStorage.setItem("ban_link", row.ban_H5)
      console.log(row)

      this.form.cc = false;
=======
    bbb (row) {
      window.sessionStorage.setItem("ban_id", row.ban_id)
>>>>>>> Stashed changes
      this.centerDialogVisible = true,
        this.form.type = row.ban_type == 0 ? '患教活动' : row.ban_type == 1 ? '病历探讨' : 'H5活动';
      this.form.shows = row.ban_exh == 0 ? '患者端' : row.ban_exh == 1 ? '医生端' : '患者端,医生端';
      this.form.content = row.ban_activty;
      this.form.link = row.ban_H5;
      this.form.img = row.ban_img
    },
    upbanner() {
      let id = window.sessionStorage.getItem("ban_id")
      this.$service.bannerService.upbanner({ activty: this.form.content, exh: this.form.shows, h5: this.form.link, id: id, img: this.form.img, type: this.form.type }).then(res => {
        console.log(res);
        // this.bannerlist = res.data.data.maps;
      });
      this.getbannerlist();
    },
<<<<<<< Updated upstream
    searchbanner() {
      this.form.value = moment(this.form.value).format('YYYY-MM-DD HH:mm:ss')
      this.$service.bannerService.searchbanner(this.page, this.form.value, this.size, this.form.region).then(res => {
        this.bannerlist = res.data.data.maps;
      })
=======
    searchbanner () {
      this.$service.bannerService.searchbanner(this.page)
>>>>>>> Stashed changes
    }
  },


  // handleRemove (file) {
  //   console.log(file);
  // },
  // handlePictureCardPreview (file) {
  //   this.dialogImageUrl = file.url;
  //   this.dialogVisible = true;
  // },
  // handleDownload (file) {
  //   console.log(file);
  // },

}

</script>

<style scoped lang="less">
.banner-search {
  margin-top: 30px;
  overflow: hidden;
}

.ban-search {
  float: left;
  padding-left: 40px;
}

.list {
  margin-top: 50px;

  .list-name {
    overflow: hidden;

    .but {
      float: right;
    }
  }
}

.img {
  text-align: center;
}
</style>
